<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>
<!doctype html>
<html>
    
    <head>
        <title>Sora's Spring</title>
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootswatch/3.0.0/slate/bootstrap.min.css">
        <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
        <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js" type="text/javascript"></script>
        <style type="text/css">
            body {
                padding-top: 20px;
            }
            .footer {
                border-top: 1px solid #eee;
                margin-top: 40px;
                padding-top: 40px;
                padding-bottom: 40px;
            }
            /* Main marketing message and sign up button */
            .jumbotron {
                text-align: center;
                background-color: transparent;
            }
            .jumbotron .btn {
                font-size: 21px;
                padding: 14px 24px;
            }
            /* Customize the nav-justified links to be fill the entire space of the .navbar */
            .nav-justified {
                background-color: #eee;
                border-radius: 5px;
                border: 1px solid #ccc;
            }
            .nav-justified > li > a {
                padding-top: 15px;
                padding-bottom: 15px;
                color: #777;
                font-weight: bold;
                text-align: center;
                border-bottom: 1px solid #d5d5d5;
                background-color: #e5e5e5;
                /* Old browsers */
                background-repeat: repeat-x;
                /* Repeat the gradient */
                background-image: -moz-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
                /* FF3.6+ */
                background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #e5e5e5));
                /* Chrome,Safari4+ */
                background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
                /* Chrome 10+,Safari 5.1+ */
                background-image: -ms-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
                /* IE10+ */
                background-image: -o-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
                /* Opera 11.10+ */
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#e5e5e5', GradientType=0);
                /* IE6-9 */
                background-image: linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
                /* W3C */
            }
            .nav-justified > .active > a, .nav-justified > .active > a:hover, .nav-justified > .active > a:focus {
                background-color: #ddd;
                background-image: none;
                box-shadow: inset 0 3px 7px rgba(0, 0, 0, .15);
            }
            .nav-justified > li:first-child > a {
                border-radius: 5px 5px 0 0;
            }
            .nav-justified > li:last-child > a {
                border-bottom: 0;
                border-radius: 0 0 5px 5px;
            }
            @media(min-width: 768px) {
                .nav-justified {
                    max-height: 52px;
                }
                .nav-justified > li > a {
                    border-left: 1px solid #fff;
                    border-right: 1px solid #d5d5d5;
                }
                .nav-justified > li:first-child > a {
                    border-left: 0;
                    border-radius: 5px 0 0 5px;
                }
                .nav-justified > li:last-child > a {
                    border-radius: 0 5px 5px 0;
                    border-right: 0;
                }
            }
            /* Responsive: Portrait tablets and up */
            @media screen and(min-width: 768px) {
                /* Remove the padding we set earlier */
                .masthead, .marketing, .footer {
                    padding-left: 0;
                    padding-right: 0;
                }
            }
        </style>
    </head>
    
    <body>
        <div class="container">
            <div class="masthead">
                <h3 class="text-muted">sora's Project</h3>
                <ul class="nav nav-justified">
                    <li class="active">
                        <a href="#">Home</a>
                    </li>
                    <li>
                        <a href="#">Java</a>
                    </li>
                    <li>
                        <a href="#">Jsp</a>
                    </li>
                    <li>
                        <a href="#">Spring</a>
                    </li>
                    <li>
                        <a href="#">SQL</a>
                    </li>
                    <li>
                        <a href="#">Contact</a>
                    </li>
                </ul>
            </div><!-- Jumbotron -->
            <div class="jumbotron">
                <h1>Spring Study!</h1>
                <p class="lead">표준 방송통신 시스템 구축을 위한 전자정부 프레임워크 개발 과정</p>
                <p><a class="btn btn-lg btn-success" href="#">Get started today</a></p>
            </div><!-- Example row of columns -->
            <div class="row">
                <div class="col-lg-4">
                    <h2>java</h2>
                    <p>함께 만들어가는 spring programming(1장~5장)</p>
                    <p><a class="btn btn-primary" href="#">View details &raquo;</a></p>
                </div>
                <div class="col-lg-4">
                    <h2>WEB</h2>
                    <p>spring을 이용한 웹 프로젝트</p>
                    <p><a class="btn btn-primary" href="#">View details &raquo;</a></p>
                </div>
                <div class="col-lg-4">
                    <h2>미정</h2>
                    <p>무엇을 할지 아직 미정...</p>
                    <p><a class="btn btn-primary" href="#">View details &raquo;</a></p>
                </div>
            </div><!-- Site footer -->
            <div class="footer">
                <p>&copy; made by sora</p>
            </div>
        </div><!-- /container -->
    </body>

</html>